<template>
  <div class="company">
      <h1 class="company_h1">公司列表</h1>
      <div class="any_hr"></div>


      <!-- 切换页 -->
      <div class="company_qh">
          <div class="comany_one">
              <div class="conany_aa">每页显示记录数:</div>
              <div class="conany_bb" @click="getshow">
                <!-- @click="getshow" -->
                <p>
                  {{this.vnums[vnumcount]}}
                </p>
                <span></span>
              <div v-if="bian3" class="company_show">
                  <div v-for="(num,indexa) in vnums" 
                  :key="indexa"
                  @click="vnumcount=indexa"
                  :class="{company_liang:vnumcount==indexa}"
                  >
                    {{num}}
                  </div>
              </div>
              </div>
          </div>
          <div class="comany_two">
            <input 
            type="text" 
            placeholder="请输入关键字"
            v-model="zhi"
            @keyup.enter="getdatea"
            >
            <span @click="getdatea">
              <img src="../assets/imgs/fanda.png" alt="">
            </span>
          </div>
      </div>

      <!-- 表格 -->
      
      <table class="tiandis">
        <thead>
          <tr>
            <td>
              <input type="checkbox">
              <span>全选</span>
            </td>
            <td>编号</td>
            <td>公司logo</td>
            <td>公司名称</td>
            <td>公司优点</td>
            <td>公司性质</td>
            <td>公司类型</td>
            <td>公司规模</td>
            <td>公司地址</td>
            <td>
              <span class="tiana">操作</span> 
              <span class="tian" @click="gettianjia">添加</span>
            </td>
            <!-- 添加公司 -->
            <div class="tianjia" v-if="tianjia">
              <div>
                <b>
                添加公司详情
                </b>
              </div>
              <ul>
                <li>
                  <span>
                    公司名称
                  </span>
                  <input v-model="tgsname" type="text">
                </li>
                <li>
                  <p ref="tgsname">公司名称不能为空</p>
                  <p ref="tgsname_1">公司名格式错误 提示：字数不小于2不多于20</p>
                  <p ref="tgsname_2">公司名已存在</p>
                </li>
                <li>
                  <span>
                    公司优点
                  </span>
                  <input v-model="tgsyd" type="text">
                </li>
                <li>
                  <p ref="tgsyd_1">不能为空</p>
                  <p ref="tgsyd_2">格式错误 提示：字数不小于2不多于20</p>
                </li>
                <li>
                  <span>
                    公司性质
                  </span>
                  <input v-model="tgsxz" type="text">
                </li>
                <li>
                  <p ref="tgsxz_1">不能为空</p>
                  <p ref="tgsxz_2">格式错误 提示：字数不小于2不多于20</p>
                </li>
                <li>
                  <span>
                    公司类型
                  </span>
                  <input v-model="tgslx" type="text">
                </li>
                <li>
                  <p ref="tgslx_1">不能为空</p>
                  <p ref="tgslx_2">格式错误 提示：字数不小于2不多于20</p>
                </li>
                <li>
                  <span>
                    公司规模
                  </span>
                  <input v-model="tgsgm" type="text">
                </li>
                <li>
                  <p ref="tgsgm_1">不能为空</p>
                  <p ref="tgsgm_2">格式错误 提示：字数不小于2不多于20</p>
                </li>
                <li>
                  <span>
                    公司地址
                  </span>
                  <input v-model="tgsdz" type="text">
                </li>
                <li>
                  <p ref="tgsdz_1">不能为空</p>
                  <p ref="tgsdz_2">格式错误 提示：字数不小于2不多于20</p>
                </li>
              </ul>
              <div>
                <div @click="gittianjiaq">确定</div>
                <div @click="gettianjiab">取消</div>
              </div>
            </div>
          </tr>
        </thead>

        <!-- <div class="tianjian">

        </div> -->

        <tbody>
          <tr v-for="data in datab" :key="data.jid">
            <td>
              <input type="checkbox">
            </td>
            <td>
              {{data.jid}}
            </td>
            <td>
              <img src="" alt="">
            </td>
            <td>
              {{data.c_name}}
            </td>
            <td>
              {{data.c_merit1}}
              {{data.c_merit2}}
              {{data.c_merit5}}
              {{data.c_merit4}}
            </td>
            <td>
              {{data.c_xingzhi}}
            </td>
            <td>
              {{data.c_type}}
            </td>
            <td>
              {{data.c_number}}
            </td>
            <td>
              {{data.c_address}}
            </td>
            <td>
              <b class="tbodyb" @click="getxiougai(data.jid)">修改</b>
              <b class="tbodyb" @click="getshan(data.jid)">删除</b>
            </td>
          </tr>
            <div v-if="xiougai" class="xiougai">
              <div>
                <b>
                修改公司详情
                </b>
              </div>
              <ul v-for="xiougais in xiouga" :key="xiougais.jid">
                <li>
                  <span>
                    修改公司名称
                  </span>
                  <span>
                    {{xiougais.c_name}}
                  </span>
                </li>
                <li>
                  <input v-model="xgsname" type="text">
                  
                </li>
                <li>
                  <span>
                    修改公司优点
                  </span>
                  <span>
                    {{xiougais.c_merit1}}
                  </span>
                </li>
                <li>
                  <input v-model="xgsyd" type="text">
                  
                </li>
                <li>
                  <span>
                    修改公司性质
                  </span>
                  <span>
                    {{xiougais.c_xingzhi}}
                  </span>
                </li>
                <li>
                  <input v-model="xgsxz" type="text">
                  
                </li>
                <li>
                  <span>
                    修改公司类型
                  </span>
                  <span>
                    {{xiougais.c_type}}
                  </span>
                </li>
                <li>
                  <input v-model="xgslx" type="text">
                  
                </li>
                <li>
                  <span>
                    修改公司规模
                  </span>
                  <span>
                    {{xiougais.c_number}}
                  </span>
                </li>
                <li>
                  <input v-model="xgsgm" type="text">
                </li>
                <li>
                  <span>
                    修改公司地址
                  </span>
                  <span>
                    {{xiougais.c_address}}
                  </span>
                </li>
                <li>
                  <input v-model="xgsdz" type="text">
                  
                </li>
              </ul>
              <div class="div_p">
                <p>注意： 任意输入框没写内容时 原来的内容将不会修改</p>
              </div>
              <div>
                <div @click="getxiougaix(aa)">确定</div>
                <div @click="getxiougaib">取消</div>
              </div>
            </div>
        </tbody>
      </table>
      <div class="pager" v-if="fenye">
          <div 
            class="jian"
              @click="getdatea(fenye.pageNo - 1)"
              :class="{ dtys: fenye.pageNo == 1 }"
          >
            <span>
            </span>
          </div>
          <div class="pager_a" >
            <div 
            v-for="(dgd) in fenye.total" 
            :class="{dtysa:dgd==fenye.pageNo}"
            :key="dgd"
            @click="
            fenye.pageNo = dgd;
            getdatea(dgd)
            "
            >
              {{dgd}}
            </div>
          </div>
          <div 
            class="jia"
            @click="getdatea(fenye.pageNo + 1)"
            :class="{ dtys: fenye.pageNo == fenye.total }"
          >
          <span></span>
          </div>
      </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        aa:null,
          bian3: false,
          vnums:['10','20','40','60','80','100'],
          vnumcount:0,
          datas:null,
          zhi:"",
          datab:[],
          xiouga:[],
          fenye: null,
          tianjia: false,//true
          xiougai: false,
          // 添加公司
          tgsname:'', //添公司名称
          tgsyd:'',   //添公司优点
          tgsxz:'',   //添公司性质
          tgslx:'',   //添公司类型
          tgsgm:'',   //添公司规模
          tgsdz:'',   //添公司地址
          // 修改公司
          xgsname:'', //修公司名称
          xgsyd:'',   //修公司优点
          xgsxz:'',   //修公司性质
          xgslx:'',   //修公司类型
          xgsgm:'',   //修公司规模
          xgsdz:'',   //修公司地址
      }
    },
    watch:{
      jianting(){
        this.getdatea()
        // this.getshan()
      }
    },
    mounted () {
      // console.log("aa",this.aa)
      document.addEventListener("click", (e) => {
      if (e.target._prevClass != "conany_cc") {
        // console.log(e)
        this.bian3 = false;
      }
      })
      this.getdatea()
      // this.getshan()
    },
    methods: {
      // 修改
      // getxiougai(e){
      //   if(this.xiougai==false){
      //     this.xiougai=true
      //   }
      // },
      getxiougaib(){
        if(this.xiougai==true){
          this.xiougai=false
        }
      },
      // 修改前的获取数据
      getxiougai(xiougaia){
        this.aa=xiougaia
        if(this.xiougai==false){
          this.xiougai=true
        }
        const url="/v1/news/sgsa?sgsa="+xiougaia;
        this.axios.get(url).then(res=>{
          // console.log(res)
          this.xiouga = res.data.res
          // this.aa=res.data.res.jid
          // console.log('123',this.xiouga)
        })
      },
      // 修改
      getxiougaix(xiougai){
        // console.log('jid',xiougai)
        let jid=xiougai
        const {xgsname,xgsyd,xgslx,xgsxz,xgsgm,xgsdz}=this;
          
        if(!xgsname){
          return;
        }else if(!xgsyd){
          return;
        }else if(!xgslx){
          return;
        }else if(!xgsxz){
          return;
        }else if(!xgsgm){
          return;
        }else if(!xgsdz){
          return;
        }else{
let marginx = `c_name=${xgsname}&c_merit1=${xgsyd}&c_type=${xgslx}&c_xingzhi=${xgsxz}&c_number=${xgsgm}&c_address=${xgsdz}&jid=${jid}`;
        // console.log(xgsname,xgsyd,xgslx,xgsxz,xgsgm,xgsdz)
        const url_x = "/v1/news/sgsb"
          this.axios.post(url_x,marginx).then(res=>{
            // console.log(res)
            if(res.data.code==200){
              alert('修改成功')
              this.getdatea()
              this.xiougai=false
            }
          })
        }
      },

      // 删
      getshan(shan){
        // console.log(shan)
        const url_shan="/v1/news/sgnames?shan="+shan;
        // console.log(url_shan)
        this.axios.get(url_shan).then(res=>{
          // console.log("删除返回i",res)
          if(res.data.code==200){
            alert('删除成功')
            this.getdatea()
          }
        })
      },
      // 添加
      gettianjiab(){
        this.tianjia = false
      },
      gettianjia(){
        if (this.tianjia == true) {
          this.tianjia = false;
        } else if (this.tianjia == false) {
          this.tianjia = true;
        }
      },
      gittianjiaq(){
        // console.log(this.tgsname,this.tgsdz,this.tgsgm,this.tgsxz,this.tgslx,this.tgsyd)
        // console.log(this)

        const zhenze =/^.{2,20}$/;
        // 公司名称
        const urlc=`v1/news/gnames?tgsname=${this.tgsname}`;
        if(!this.tgsname){
          this.$refs.tgsname.style.display="block";
          this.$refs.tgsname_1.style.display="none";
          this.$refs.tgsname_2.style.display="none";
          return;
        }else if(!zhenze.test(this.tgsname)){
          this.$refs.tgsname.style.display="none";
          this.$refs.tgsname_1.style.display="block";
          this.$refs.tgsname_2.style.display="none";
          return;
        }else {
          this.$refs.tgsname.style.display="none";
          this.$refs.tgsname_1.style.display="none";
          this.$refs.tgsname_2.style.display="none";
          this.axios.get(urlc).then(res=>{
            // console.log(res)
            // 乐其爱科技
            const codeb=res.data.code
            if (res.data.code == 200) {
            
            this.$refs.tgsname_2.style.display = "block";
            return;
          } else {
            this.$refs.tgsname.style.display="none";
            this.$refs.tgsname_1.style.display="none";
            this.$refs.tgsname_2.style.display = "none";
          }
          });
        }
        // 公司优点
        if(!this.tgsyd){
          this.$refs.tgsyd_1.style.display="block";
          this.$refs.tgsyd_2.style.display="none";
          return;
        }else if(!zhenze.test(this.tgsyd)){
          this.$refs.tgsyd_2.style.display="block";
          this.$refs.tgsyd_1.style.display="none";
          return;
        }else{
          this.$refs.tgsyd_1.style.display="none";
          this.$refs.tgsyd_2.style.display="none";
        }
        // 公司性质
        if(!this.tgsxz){
          this.$refs.tgsxz_1.style.display="block";
          this.$refs.tgsxz_2.style.display="none";
          return;
        }else if(!zhenze.test(this.tgsxz)){
          this.$refs.tgsxz_2.style.display="block";
          this.$refs.tgsxz_1.style.display="none";
          return;
        }else{
          this.$refs.tgsxz_1.style.display="none";
          this.$refs.tgsxz_2.style.display="none";
        }
        // 公司类型
        if(!this.tgslx){
          this.$refs.tgslx_1.style.display="block";
          this.$refs.tgslx_2.style.display="none";
          return;
        }else if(!zhenze.test(this.tgslx)){
          this.$refs.tgslx_2.style.display="block";
          this.$refs.tgslx_1.style.display="none";
          return;
        }else{
          this.$refs.tgslx_1.style.display="none";
          this.$refs.tgslx_2.style.display="none";
        }
        // 公司规模
        if(!this.tgsgm){
          this.$refs.tgsgm_1.style.display="block";
          this.$refs.tgsgm_2.style.display="none";
          return;
        }else if(!zhenze.test(this.tgsgm)){
          this.$refs.tgsgm_2.style.display="block";
          this.$refs.tgsgm_1.style.display="none";
          return;
        }else{
          this.$refs.tgsgm_1.style.display="none";
          this.$refs.tgsgm_2.style.display="none";
        }
        // 公司地址
        if(!this.tgsdz){
          this.$refs.tgsdz_1.style.display="block";
          this.$refs.tgsdz_2.style.display="none";
          return;
        }else if(!zhenze.test(this.tgsdz)){
          this.$refs.tgsdz_2.style.display="block";
          this.$refs.tgsdz_1.style.display="none";
          return;
        }else{
          this.$refs.tgsdz_1.style.display="none";
          this.$refs.tgsdz_2.style.display="none";
        }
        const {tgsname,tgsyd,tgslx,tgsxz,tgsgm,tgsdz}=this;
        let margin = `tgsname=${tgsname}&tgsyd=${tgsyd}&tgslx=${tgslx}&tgsxz=${tgsxz}&tgsgm=${tgsgm}&tgsdz=${tgsdz}`;
        let url_gst="v1/news/tgnames";
        this.axios.post(url_gst,margin).then(res=>{
          // console.log(res)
          if(res.data.code == 200){
            alert('添加成功')
            this.getdatea()
            this.tianjia=false
          }
        })
      },
      // if(){

      // },

      ///////////////
      getshow() {
        if (this.bian3 == true) {
          this.bian3 = false;
        } else if (this.bian3 == false) {
          this.bian3 = true;
        }
      },
      getdatea(dgd){
        // console.log("zhi:",this.zhi)
        
        if (this.zhi) {
          const url = `/v1/news/search_g?c_name=` + this.zhi;
          this.axios.get(url).then((res) => {
            console.log('zhi',res)
            this.datab = res.data.data;
            this.fenye = null;
          });
        } else {
          // console.log("p:",dgd)
          const url = `/v1/news/fenye?page=${dgd}`;
          // console.log(url)
          this.axios.get(url).then((res) => {
            // console.log("分页", res);
            this.datab = res.data.data;
            if (res.data.total >= 2) {
              this.fenye = res.data;
              // console.log('png',res)
            }
          });
        }
      },

    },
  }
</script>

<style scoped src="../assets/css/company.css"></style>
